<template>
	<view class="container">
		<view class="background-color" :style="'background:' + mobile_head_color">
			<view class="topbox">
				<view class="name">{{listdata.room_address}}</view>
				<view class="info-box">
					<view class="name">{{listdata.user_name}}</view>
					<view class="tips">业主</view>
				</view>
				<view class="phone">{{listdata.user_phone}}</view>
				<view class="address-box" v-if="listdata.village_address">
					<view class="address-icon">
						<image src="../../../static/images/address.png" class="address-img"></image>
					</view>
					<view class="address-text">{{listdata.village_address}}</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="dataList[0]" @tap="gometerReading(item.id)" v-for="(item,index) in dataList">
			<view class="left-box">
				<view class="title">{{item.cate_name}}</view>
				<view class="card-tips" v-if="item.status == 2">{{item.statusDesc}}</view>
				<view class="card-tips" v-if="item.status == 1" style="background: #7DA8F7;color: #FFFFFF;">{{item.statusDesc}}</view>
			</view>
			<view class="right-box">
				<view class="text">点击进入</view>
				<view class="right-iocn">
					<image src="../../../static/images/right_icon.png" mode="" class="right-img"></image>
				</view>
			</view>
		</view>
		<div class='tip_box_no_data' v-if="!dataList[0]">
			<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
			<div class='no_tip_content'>
				<lang keywords="暂无内容~"></lang>
			</div>
		</div>
		<view class="independent_payment" @tap="govisitor">
			<image src="../../../static/images/historyList.png" class="independent-img"></image>
		</view>
		<view class="lefttbtn" @tap="pageUp" v-if="page != 1">
			上一间({{alldata.start_room_info}})
		</view>
		<view class="rightbtn" @tap="pageDown" v-if="page != total_page - 1">
			下一间({{alldata.last_room_info}})
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getvisitorList = () => {
		common.post('HouseApi&a=room_info_project', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			floor_id: _this.floor_id,
			page: _this.page,
		}, data => {
			console.log('++++', data)
			_this.alldata = data;
			_this.listdata = data.find_info;
			_this.dataList = data.read_cate;
			_this.room_id = data.find_info.room_id;
			_this.total_page = data.total_page
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				alldata:{},
				dataList: [],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				room_id: '',
				floor_id: '',
				page: '',
				total_page: '',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.village_id = options.village_id;
			_this.pigcms_id = options.pigcms_id;
			_this.floor_id = options.floor_id;
			_this.page = options.page;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';
				getvisitorList()
				_this.isFirstLoad = false;
			});
		},
		methods: {
			govisitor() {
				uni.navigateTo({
					url: '/pages/village/mobileMeterReading/meterRecords?room_id=' + _this.room_id
				})
			},
			gometerReading(id) {
				uni.navigateTo({
					url: '/pages/village/mobileMeterReading/writeMeter?id=' + id + "&pigcms_id=" + _this.pigcms_id
				})
			},
			pageUp(){
				_this.page = _this.page - 1;
				getvisitorList()
			},
			pageDown(){
				_this.page = Number(_this.page) + Number(1);
				console.log("444444444444444",_this.page)
				getvisitorList()
			},
		},
		components: {
			
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.topbox {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}

	.phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.address-icon {
		width: 25rpx;
		height: 30rpx;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.card {
		background-color: #ffffff;
		box-shadow: 0px 2rpx 22rpx 4rpx rgba(227, 227, 227, 0.48);
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.left-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.card-tips {
		padding: 2rpx 8rpx;
		font-size: 24rpx;
		background-color: #37DC9A;
		border-radius: 4rpx;
		margin-left: 20rpx;
		color: #FFFFFF;
	}
	.right-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0px;
		color: #CCCCCC;
		margin-right: 10rpx;
	}

	.right-iocn {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		width: 100%;
		height: 100%;
	}

	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
	}

	.independent-img {
		width: 100%;
		height: 100%;
		border-radius: 102rpx;
		display: block;
	}

	.tip_box_no_data {
		padding-top: 200rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}

	.no_data_img {
		width: 374rpx;
		height: 288rpx;
	}
	.lefttbtn {
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
		padding: 0 35rpx;
		border: 3rpx solid #2681f3;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 45rpx;
		color: #2681f3;
	}
	.rightbtn {
		position: fixed;
		bottom: 80rpx;
		right: 30rpx;
		padding: 0 35rpx;
		border: 3rpx solid #2681f3;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 45rpx;
		color: #2681f3;
	}
</style>
